<template>
    <div class="tab-bar-item" @click="itemclick">
      <div v-if="!isActive">
        <slot name="item-icon"></slot>
      </div>
      <div v-else>
<!--        定义插槽名称-->
        <slot name="item-icon-active"></slot>
      </div>
<!--      动态绑定样式属性  绑定计算属性-->
      <div :style="activeStyle">
        <slot name="text"></slot>
      </div>
    </div>
</template>

<script>
export default {
  name: "TabBarItem",
  data() {
    return{
      // 表示活跃状态
      // isActive : false,
    }
  },// 经行路由的参数传递
  // 父组件传递参数给子组件
  props:{
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  methods:{
    itemclick(){
      this.$router.replace(this.path).catch((err) => {
        console.log(err);})
    }
  },
  // 计算属性
  // 如果属性太过于复杂的话  可以全部将复杂的代码抽取出来 放入计算属性中
  computed: {
    isActive(){
      //  用活跃的路由的地址判断是否等于当前路由
      return this.$route.path.indexOf(this.path) != -1
    },
    activeStyle(){
      // 判断当前组件是否存活 如果存活则替换颜色样式  不存活则使用默认属性
      return this.isActive ? {color : this.activeColor} : {}
    }
  }
}
</script>

<style scoped>
 /*.active{*/
 /*  color: red;*/
 /*}*/
</style>
